import 'dart:math' as math;
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_switch/flutter_switch.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class EvaluatePublishController extends GetxController {
  RxInt review = RxInt(0);

  RxBool isDefault = false.obs;

  List<Widget> lists = [];

  RxInt len = RxInt(0);

  RxInt logistics = RxInt(0);

  RxInt service = RxInt(0);

  Map<int, String> map = {
    0: '',
    1: '非常差',
    2: '差',
    3: '一般',
    4: '好',
    5: '非常好',
  };
}

class EvaluatePublishPage extends GetView<EvaluatePublishController> {
  const EvaluatePublishPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '发表评价',
          style: StylesUtils.customTextStyle(
              fontWeight: FontWeight.w700, fontSize: StylesUtils.fontSize18),
        ),
        actions: [
          TextButton(
              onPressed: () {},
              child: Text(
                '发布',
                style: StylesUtils.customTextStyle(),
              ))
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              color: Colors.white,
              padding: const EdgeInsets.only(
                  left: 15, right: 20, top: 15, bottom: 15),
              child: Column(
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(5),
                        child: CachedNetworkImage(
                          imageUrl:
                              'https://gw.alicdn.com/bao/uploaded/i3/619123122/O1CN01f3Ymx81YvvStanwoo_!!0-item_pic.jpg_210x210q75.jpg_.webp',
                          width: 90,
                          height: 90,
                          fit: BoxFit.fill,
                        ),
                      ),
                      Expanded(
                          child: Padding(
                        padding: const EdgeInsets.only(left: 10),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '平底包头凉鞋女2019夏季新款网红女鞋韩版百搭后空一字带',
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color6666,
                                    fontSize: StylesUtils.fontSize13,
                                    lineHeight: 1.3.h),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '米白色；36',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: ColorsUtils.color9999),
                              ),
                            ),
                          ],
                        ),
                      ))
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 15),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Obx(() => InkWell(
                              onTap: () {
                                controller.review.value = 1;
                              },
                              child: Text.rich(TextSpan(children: [
                                WidgetSpan(
                                    child: SvgUtils.assetName(
                                        controller.review.value == 1
                                            ? 'u14987_selected'
                                            : 'u14987',
                                        width: 20,
                                        height: 21),
                                    alignment: PlaceholderAlignment.middle),
                                TextSpan(
                                    text: ' 好评',
                                    style: StylesUtils.customTextStyle(
                                      color: controller.review.value == 1
                                          ? ColorsUtils.colorEc80
                                          : ColorsUtils.color9999,
                                    ))
                              ])),
                            )),
                        Obx(() => InkWell(
                              onTap: () {
                                controller.review.value = 2;
                              },
                              child: Text.rich(TextSpan(children: [
                                WidgetSpan(
                                    child: SvgUtils.assetName(
                                        controller.review.value == 2
                                            ? 'u14977_selected'
                                            : 'u14977',
                                        width: 20,
                                        height: 21),
                                    alignment: PlaceholderAlignment.middle),
                                TextSpan(
                                    text: ' 中评',
                                    style: StylesUtils.customTextStyle(
                                      color: controller.review.value == 2
                                          ? ColorsUtils.colorEc80
                                          : ColorsUtils.color9999,
                                    ))
                              ])),
                            )),
                        Obx(() => InkWell(
                              onTap: () {
                                controller.review.value = 3;
                              },
                              child: Text.rich(TextSpan(children: [
                                WidgetSpan(
                                    child: SvgUtils.assetName(
                                        controller.review.value == 3
                                            ? 'u14981_selected'
                                            : 'u14981',
                                        width: 20,
                                        height: 21),
                                    alignment: PlaceholderAlignment.middle),
                                TextSpan(
                                    text: ' 差评',
                                    style: StylesUtils.customTextStyle(
                                      color: controller.review.value == 3
                                          ? ColorsUtils.colorEc80
                                          : ColorsUtils.color9999,
                                    ))
                              ])),
                            )),
                      ],
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 20),
              color: Colors.white,
              padding: const EdgeInsets.all(15),
              alignment: Alignment.centerLeft,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    padding: const EdgeInsets.symmetric(
                        vertical: 10, horizontal: 15),
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: ColorsUtils.parseColorFromHexString(
                                ColorsUtils.colorF2f2))),
                    child: TextField(
                      cursorHeight: 15,
                      cursorWidth: 3,
                      cursorColor: ColorsUtils.parseColorFromHexString(
                          ColorsUtils.colorF048),
                      cursorRadius: const Radius.circular(2),
                      cursorOpacityAnimates: false,
                      maxLines: 15,
                      minLines: 8,
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333),
                      decoration: InputDecoration(
                          hintText: '宝贝满足你的期待吗？说说它的优点和美中不足的地方吧',
                          hintStyle: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999,
                              fontSize: StylesUtils.fontSize13),
                          border: InputBorder.none,
                          focusedBorder: InputBorder.none),
                      onChanged: (String value) {},
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 15, bottom: 20),
                    child: Wrap(
                      spacing: 20,
                      crossAxisAlignment: WrapCrossAlignment.center,
                      alignment: WrapAlignment.start,
                      children: [
                        InkWell(
                          onTap: () async {
                            List<XFile> imgs =
                                await ToolsUtils.loadGalleryImage();
                            Get.log('immsg = $imgs');
                          },
                          child: SizedBox(
                            width: 70,
                            height: 70,
                            child: CustomPaint(
                              painter: DashRectPainter(
                                  color: ColorsUtils.parseColorFromHexString(
                                      ColorsUtils.color9999),
                                  strokeWidth: 1,
                                  gap: 5),
                              child: Column(
                                children: [
                                  Container(
                                    alignment: Alignment.center,
                                    margin: const EdgeInsets.only(top: 15),
                                    child: SvgUtils.assetName('u14996',
                                        width: 24, height: 20),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.center,
                                    child: Text(
                                      '添加图片',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                        InkWell(
                          onTap: () {},
                          child: SizedBox(
                            width: 70,
                            height: 70,
                            child: CustomPaint(
                              painter: DashRectPainter(
                                  color: ColorsUtils.parseColorFromHexString(
                                      ColorsUtils.color9999),
                                  strokeWidth: 1,
                                  gap: 5),
                              child: Column(
                                children: [
                                  Container(
                                    alignment: Alignment.center,
                                    margin: const EdgeInsets.only(top: 15),
                                    child: SvgUtils.assetName('u15000',
                                        width: 24, height: 20),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.center,
                                    child: Text(
                                      '添加图片',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Obx(() => Text.rich(
                            TextSpan(children: [
                              TextSpan(
                                text: '匿名  ',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color3333),
                              ),
                              WidgetSpan(
                                  child: FlutterSwitch(
                                width: 48,
                                height: 24,
                                activeToggleColor: Colors.white,
                                activeColor:
                                    ColorsUtils.parseColorFromHexString(
                                        ColorsUtils.colorF26f),
                                inactiveColor:
                                    ColorsUtils.parseColorFromHexString(
                                        ColorsUtils.colorCccc),
                                toggleSize: 22,
                                padding: 2,
                                value: controller.isDefault.value,
                                onToggle: (bool value) {
                                  controller.isDefault.value = value;
                                },
                              ))
                            ]),
                          )),
                      Text(
                        '你的评价能帮助其他小伙伴哟',
                        style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize12,
                            color: ColorsUtils.color9999),
                      )
                    ],
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 15),
              color: Colors.white,
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.only(left: 15, top: 15, bottom: 30),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Wrap(
                    spacing: 15,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    alignment: WrapAlignment.start,
                    children: [
                      SvgUtils.assetName('u13087', width: 20, height: 20),
                      Text(
                        '店铺得分',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color3333),
                      )
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 15, right: 25),
                    child: Row(
                      children: [
                        Text(
                          '描述相符',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color6666,
                          ),
                        ),
                        Container(
                          width: 170,
                          margin: const EdgeInsets.only(left: 20, right: 20),
                          alignment: Alignment.centerLeft,
                          child: Wrap(
                            spacing: 15,
                            children: [
                              for (var i = 1; i < 6; i++)
                                Obx(() => InkWell(
                                      onTap: () {
                                        controller.len.value = i;
                                      },
                                      child: SvgUtils.assetName(
                                          controller.len.value >= i
                                              ? 'u15013_selected'
                                              : 'u15013',
                                          width: 21,
                                          height: 20),
                                    ))
                            ],
                          ),
                        ),
                        Obx(() => Text(
                              controller.map[controller.len.value]!,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color9999),
                            ))
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 20, right: 25),
                    child: Row(
                      children: [
                        Text(
                          '物流服务',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color6666,
                          ),
                        ),
                        Container(
                          width: 170,
                          margin: const EdgeInsets.only(left: 20, right: 20),
                          alignment: Alignment.centerLeft,
                          child: Wrap(
                            spacing: 15,
                            children: [
                              for (var i = 1; i < 6; i++)
                                Obx(() => InkWell(
                                      onTap: () {
                                        controller.logistics.value = i;
                                      },
                                      child: SvgUtils.assetName(
                                          controller.logistics.value >= i
                                              ? 'u15013_selected'
                                              : 'u15013',
                                          width: 21,
                                          height: 20),
                                    ))
                            ],
                          ),
                        ),
                        Obx(() => Text(
                              controller.map[controller.logistics.value]!,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color9999),
                            ))
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 20, right: 25),
                    child: Row(
                      children: [
                        Text(
                          '服务态度',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color6666,
                          ),
                        ),
                        Container(
                          width: 170,
                          margin: const EdgeInsets.only(left: 20, right: 20),
                          alignment: Alignment.centerLeft,
                          child: Wrap(
                            spacing: 15,
                            children: [
                              for (var i = 1; i < 6; i++)
                                Obx(() => InkWell(
                                      onTap: () {
                                        controller.service.value = i;
                                      },
                                      child: SvgUtils.assetName(
                                          controller.service.value >= i
                                              ? 'u15013_selected'
                                              : 'u15013',
                                          width: 21,
                                          height: 20),
                                    ))
                            ],
                          ),
                        ),
                        Obx(() => Text(
                              controller.map[controller.service.value]!,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color9999),
                            ))
                      ],
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class DashRectPainter extends CustomPainter {
  double strokeWidth;
  Color color;
  double gap;

  DashRectPainter(
      {this.strokeWidth = 5.0, this.color = Colors.red, this.gap = 5.0});

  @override
  void paint(Canvas canvas, Size size) {
    Paint dashedPaint = Paint()
      ..color = color
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;

    double x = size.width;
    double y = size.height;

    Path _topPath = getDashedPath(
      a: const math.Point(0, 0),
      b: math.Point(x, 0),
      gap: gap,
    );

    Path _rightPath = getDashedPath(
      a: math.Point(x, 0),
      b: math.Point(x, y),
      gap: gap,
    );

    Path _bottomPath = getDashedPath(
      a: math.Point(0, y),
      b: math.Point(x, y),
      gap: gap,
    );

    Path _leftPath = getDashedPath(
      a: math.Point(0, 0),
      b: math.Point(0.001, y),
      gap: gap,
    );

    canvas.drawPath(_topPath, dashedPaint);
    canvas.drawPath(_rightPath, dashedPaint);
    canvas.drawPath(_bottomPath, dashedPaint);
    canvas.drawPath(_leftPath, dashedPaint);
  }

  Path getDashedPath({
    required math.Point<double> a,
    required math.Point<double> b,
    required gap,
  }) {
    Size size = Size(b.x - a.x, b.y - a.y);
    Path path = Path();
    path.moveTo(a.x, a.y);
    bool shouldDraw = true;
    math.Point currentPoint = math.Point(a.x, a.y);

    num radians = math.atan(size.height / size.width);

    num dx = math.cos(radians) * gap < 0
        ? math.cos(radians) * gap * -1
        : math.cos(radians) * gap;

    num dy = math.sin(radians) * gap < 0
        ? math.sin(radians) * gap * -1
        : math.sin(radians) * gap;

    while (currentPoint.x <= b.x && currentPoint.y <= b.y) {
      shouldDraw
          ? path.lineTo(currentPoint.x as double, currentPoint.y as double)
          : path.moveTo(currentPoint.x as double, currentPoint.y as double);
      shouldDraw = !shouldDraw;
      currentPoint = math.Point(
        currentPoint.x + dx,
        currentPoint.y + dy,
      );
    }
    return path;
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
